<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>XHTML 1.1 ImageMap example</title>
	</head>
	<body>
		<h1>XHTML 1.1 ImageMap example</h1>
		
		<p>This is an example of an ImageMap in XHTML 1.1 (EPUB 2).</p>
		<p>After the <a href="https://www.w3.org/TR/xhtml-modularization/Overview.html#status"
			>latest revision of the XHTML 1.1 DTD in 2010</a> the @usemap attribute
			has now datatype URIREF (basically CDATA) instead of IDREF which allows
			both of the following map referencing examples whereas the first example
			with a leading # is to be prefered</p>
		<p>At the time of this writing, oXygen will report the first example as invalid
			because they also use an outdated version of the XHTML 1.1 DTD for validation.
			However, this will be fixed in a future release.</p>
		
		
		<div class="map">
			<img src="images/map.jpg" usemap="#imagemap" width="479" height="312" alt="" />
			<map id="imagemap">
				<area shape="rect" coords="55,101,129,284" href="target.xhtml#t1" alt="Touch" title="Touch" />
				<area shape="rect" coords="153,23,270,279" href="target.xhtml#t2" alt="Touch" title="HDPlus" />
				<area shape="rect" coords="273,79,395,273" href="target.xhtml#t3" alt="Touch" title="Touch" />
			</map>
		</div>
		
		<div class="map2">
			<img src="images/map2.jpg" usemap="imagemap2" width="479" height="312" alt="" />
			<map id="imagemap2">
				<area shape="rect" coords="55,101,129,284" href="target.xhtml#t1" alt="Touch" title="Touch" />
				<area shape="rect" coords="153,23,270,279" href="target.xhtml#t2" alt="Touch" title="HDPlus" />
				<area shape="rect" coords="273,79,395,273" href="target.xhtml#t3" alt="Touch" title="Touch" />
			</map>
		</div>
	</body>
</html>